<!--
    沐辰个人主页 (Muchen Personal Homepage)

    Copyright (c) 2025 沐辰 (MC)

    项目描述：专业的个人主页网站，展示全栈开发工程师的技能、项目和联系方式
    作者：沐辰 (MC)
    邮箱：mcwlgzs@qq.com
    网站：https://mcwl.net
    GitHub：https://github.com/mcwlgzs/mc-homepage

    本项目基于 MIT 许可证开源，详情请查看 LICENSE 文件

    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all
    copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
    <title>沐辰个人主页 - 专业全栈开发工程师 | JavaScript Python React Node.js 技术专家</title>
    
    <!-- Core Meta Tags -->
    <meta name="description" content="沐辰个人主页 - 专业全栈开发工程师，5年+Web开发经验，精通JavaScript、Python、React、Node.js等技术栈。提供前端架构设计、后端系统开发、技术咨询服务。分享50+优质项目案例和技术文章，助力企业数字化转型。联系合作：mcwlgzs@qq.com">
    <meta name="keywords" content="沐辰,沐辰网络,沐辰博客,沐辰网络工作室,个人主页,全栈开发,Web开发,前端开发,后端开发,JavaScript,Python,React,Node.js,技术博客,程序员,软件工程师,网站建设,技术咨询">
    <meta name="author" content="沐辰">
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
    <meta name="language" content="zh-CN">
    <meta name="revisit-after" content="7 days">
    <meta name="generator" content="Visual Studio Code">
    <meta name="theme-color" content="#3b82f6">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">

    <!-- SEO增强标签 -->
    <meta name="rating" content="general">
    <meta name="distribution" content="global">
    <meta name="copyright" content="© 2025 沐辰 (MC). All rights reserved. Licensed under MIT License.">
    <meta name="reply-to" content="mcwlgzs@qq.com">
    <meta name="owner" content="沐辰">
    <meta name="url" content="https://mcwl.net">
    <meta name="identifier-URL" content="https://mcwl.net">
    <meta name="category" content="technology, web development, programming, portfolio">
    <meta name="coverage" content="Worldwide">
    <meta name="target" content="developers, clients, recruiters, tech enthusiasts">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    
    <!-- Open Graph / Social Media Meta Tags -->
    <meta property="og:title" content="沐辰个人主页 - 专业全栈开发工程师 | JavaScript Python React Node.js 技术专家">
    <meta property="og:description" content="沐辰个人主页 - 专业全栈开发工程师，5年+Web开发经验，精通JavaScript、Python、React、Node.js等技术栈。提供前端架构设计、后端系统开发、技术咨询服务。">
    <meta property="og:image" content="https://mcwl.net/assets/images/avatar.png">
    <meta property="og:url" content="https://mcwl.net">
    <meta property="og:type" content="profile">
    <meta property="og:site_name" content="沐辰的个人网站">
    <meta property="og:locale" content="zh_CN">
    <meta property="article:author" content="沐辰">
    <meta property="article:modified_time" content="2024-03-20T12:00:00+08:00">

    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="沐辰个人主页 - 专业全栈开发工程师 | JavaScript Python React Node.js 技术专家">
    <meta name="twitter:description" content="沐辰个人主页 - 专业全栈开发工程师，5年+Web开发经验，精通JavaScript、Python、React、Node.js等技术栈。提供前端架构设计、后端系统开发、技术咨询服务。">
    <meta name="twitter:image" content="https://mcwl.net/assets/images/avatar.png">
    <meta name="twitter:creator" content="@yourtwitterhandle">
    
    <!-- Favicon -->
    <link rel="shortcut icon" href="./assets/images/favicon.ico" type="image/x-icon">
    <link rel="icon" href="./assets/images/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" sizes="192x192" href="./assets/images/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="192x192" href="./assets/images/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="./assets/images/android-chrome-512x512.png">
    <link rel="manifest" href="./site.webmanifest">
    <meta name="theme-color" content="#3b82f6">
    
    <!-- Preconnect and Resource Hints -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">

    <!-- 性能优化 -->
    <link rel="preload" href="./assets/css/main.css" as="style">
    <link rel="preload" href="./assets/images/avatar.png" as="image">
    <link rel="prefetch" href="./assets/images/wechat-qr.jpg">

    <!-- 资源提示 -->
    <meta name="format-detection" content="telephone=no, date=no, email=no, address=no">
    <meta name="color-scheme" content="light">
    <meta name="supported-color-schemes" content="light">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://mcwl.net/">
    
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="./assets/css/main.css">

    <!-- 结构化数据 -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Person",
      "name": "沐辰",
      "alternateName": "MC",
      "jobTitle": "全栈开发工程师",
      "description": "专注于Web全栈开发，擅长前端架构设计和后端系统开发，热衷技术创新与分享",
      "image": "https://mcwl.net/assets/images/avatar.png",
      "url": "https://mcwl.net",
      "sameAs": [
        "https://github.com/mcwlgzs",
        "https://juejin.cn/user/3499111424736713",
        "weixin://contacts/profile/your-wechat-id",
        "tencent://message/?uin=38983891"
      ],
      "knowsAbout": [
        "Web开发",
        "前端架构",
        "后端开发",
        "JavaScript",
        "Python",
        "React",
        "Node.js",
        "TypeScript",
        "HTML5",
        "CSS3",
        "Git"
      ],
      "worksFor": {
        "@type": "Organization",
        "name": "自由开发者"
      },
      "address": {
        "@type": "PostalAddress",
        "addressCountry": "CN"
      },
      "alumniOf": {
        "@type": "EducationalOrganization",
        "name": "清华大学"
      },
      "award": [
        "相关奖项或认证",
        "技术认证"
      ],
      "hasOccupation": {
        "@type": "Occupation",
        "name": "全栈开发工程师",
        "occupationCategory": "15-1252.00",
        "skills": [
          "JavaScript",
          "Python",
          "React",
          "Node.js",
          "Web Development"
        ]
      }
    }
    </script>
</head>
<body>
    <!-- 粒子背景 -->
    <div id="particles-js" class="particles-container" aria-hidden="true"></div>

    <main role="main">
        <!-- 主标题 - 页面核心标题 -->
        <h1 class="sr-only">沐辰个人主页 - 全栈开发工程师的技术分享与项目展示</h1>

        <div class="bg-white/80 backdrop-blur-md shadow-xl rounded-lg p-4 sm:p-6 md:p-8 max-w-4xl w-full fade-in mx-auto my-4 sm:my-6 md:my-8" itemscope itemtype="https://schema.org/ProfilePage">
        <div class="grid md:grid-cols-3 gap-4 md:gap-8">
            <!-- 左侧个人信息 -->
            <div class="md:col-span-1 flex flex-col items-center md:items-stretch">
                <!-- 头像区域 -->
                <div class="flex justify-center mb-3 md:mb-6">
                    <div class="relative">
                        <div class="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32 rounded-full overflow-hidden border-4 border-white shadow-xl avatar-container">
                            <img src="./assets/images/avatar.png" alt="沐辰的个人头像" class="w-full h-full object-cover" loading="eager" width="128" height="128">
                        </div>
                        <div class="absolute -bottom-2 right-0 bg-green-500 w-6 h-6 rounded-full border-2 border-white flex items-center justify-center">
                            <i class="fas fa-check text-white text-xs"></i>
                        </div>
                    </div>
                </div>

                <!-- 个人信息 -->
                <header class="text-center mb-3 md:mb-6" itemscope itemtype="https://schema.org/Person">
                    <h2 class="text-2xl sm:text-3xl font-bold mb-2" itemprop="name">
                        <span class="bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent">沐辰</span>
                    </h2>
                    <div class="h-5 sm:h-6 mb-2 md:mb-4">
                        <span id="typed-text" class="text-blue-600 text-sm sm:text-base font-medium" itemprop="jobTitle"></span>
                    </div>
                    <div class="online-status mb-3 md:mb-4 text-sm bg-green-50 text-green-600 py-1 px-3 rounded-full inline-flex items-center">
                        <span class="w-2 h-2 bg-green-500 rounded-full mr-2" aria-hidden="true"></span>
                        <span itemprop="availability">接受项目合作</span>
                    </div>
                    <!-- 隐藏的结构化数据 -->
                    <meta itemprop="url" content="https://mcwl.net">
                    <meta itemprop="image" content="https://mcwl.net/assets/images/avatar.png">
                    <meta itemprop="description" content="专注于Web全栈开发，擅长前端架构设计和后端系统开发">
                    <meta itemprop="nationality" content="中国">
                    <meta itemprop="worksFor" content="自由开发者">
                </header>

                <!-- 社交媒体链接 -->
                <nav class="flex justify-center space-x-3 sm:space-x-4 md:space-x-5 mb-4 md:mb-6" aria-label="社交媒体链接">
                    <a href="https://github.com/mcwlgzs" class="social-link-card" target="_blank" rel="noopener nofollow" title="访问GitHub主页" aria-label="GitHub">
                        <div class="w-10 h-10 sm:w-11 sm:h-11 rounded-lg bg-gray-50 hover:bg-gray-100 flex items-center justify-center transition-all duration-300 group">
                            <i class="fab fa-github text-gray-600 group-hover:text-gray-800 text-xl sm:text-2xl transition-colors duration-300" aria-hidden="true"></i>
                        </div>
                    </a>
                    <a href="https://juejin.cn/user/3499111424736713" class="social-link-card" target="_blank" rel="noopener nofollow" title="访问掘金技术博客" aria-label="掘金博客">
                        <div class="w-10 h-10 sm:w-11 sm:h-11 rounded-lg bg-gray-50 hover:bg-gray-100 flex items-center justify-center transition-all duration-300 group">
                            <i class="fas fa-book text-gray-600 group-hover:text-gray-800 text-xl sm:text-2xl transition-colors duration-300" aria-hidden="true"></i>
                        </div>
                    </a>
                    <button class="social-link-card wechat-btn relative" style="overflow:visible;" title="查看微信二维码" aria-label="微信联系方式">
                        <div class="w-10 h-10 sm:w-11 sm:h-11 rounded-lg bg-gray-50 hover:bg-gray-100 flex items-center justify-center transition-all duration-300 group">
                            <i class="fab fa-weixin text-gray-600 group-hover:text-gray-800 text-xl sm:text-2xl transition-colors duration-300" aria-hidden="true"></i>
                        </div>
                        <div class="wechat-qr-popup hidden absolute left-1/2 -translate-x-1/2 bottom-full mb-2 bg-white rounded-lg shadow-xl border border-gray-100 p-3" style="width:160px;">
                            <img src="./assets/images/wechat-qr.jpg" alt="沐辰的微信二维码，扫码添加好友" class="w-full h-auto rounded-lg" loading="lazy" width="160" height="160">
                            <p class="text-center text-xs text-gray-500 mt-2">扫码加好友</p>
                            <div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-white border-r border-b border-gray-100 transform rotate-45" aria-hidden="true"></div>
                        </div>
                    </button>
                    <a href="tencent://message/?uin=38983891" class="social-link-card" target="_blank" rel="noopener nofollow" title="通过QQ联系我" aria-label="QQ">
                        <div class="w-10 h-10 sm:w-11 sm:h-11 rounded-lg bg-gray-50 hover:bg-gray-100 flex items-center justify-center transition-all duration-300 group">
                            <i class="fab fa-qq text-gray-600 group-hover:text-gray-800 text-xl sm:text-2xl transition-colors duration-300" aria-hidden="true"></i>
                        </div>
                    </a>
                </nav>

                <!-- 联系按钮 -->
                <div class="flex flex-col gap-3 sm:gap-4 mb-6 md:mb-8 w-full px-4 sm:px-0">
                    <a href="mailto:mcwlgzs@qq.com" class="w-full">
                        <button class="w-full py-2.5 sm:py-3 px-4 sm:px-6 bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center space-x-2">
                            <i class="far fa-envelope"></i>
                            <span class="font-medium">联系我</span>
                        </button>
                    </a>
                    <a href="./assets/files/resume.pdf" class="w-full" target="_blank">
                        <button class="w-full py-2.5 sm:py-3 px-4 sm:px-6 bg-gray-50 hover:bg-gray-100 text-gray-700 rounded-lg border border-gray-200 hover:border-gray-300 transition-all duration-300 flex items-center justify-center space-x-2">
                            <i class="far fa-file-alt"></i>
                            <span class="font-medium">简历</span>
                        </button>
                    </a>
                </div>

                <!-- 技术标签云 -->
                <div class="bg-gradient-to-br from-gray-50 to-white rounded-xl p-4 sm:p-5 md:p-6 w-full shadow-lg border border-gray-100">
                    <h2 class="text-base sm:text-lg font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-code mr-2 text-blue-500"></i>技术栈
                    </h2>
                    <div class="flex flex-wrap gap-2 sm:gap-2.5">
                        <span class="tech-badge">
                            <i class="fab fa-html5 text-orange-500"></i>
                            <span class="ml-1.5">HTML5</span>
                        </span>
                        <span class="tech-badge">
                            <i class="fab fa-css3-alt text-blue-500"></i>
                            <span class="ml-1.5">CSS3</span>
                        </span>
                        <span class="tech-badge">
                            <i class="fab fa-js-square text-yellow-500"></i>
                            <span class="ml-1.5">JavaScript</span>
                        </span>
                        <span class="tech-badge">
                            <i class="fab fa-js text-blue-600"></i>
                            <span class="ml-1.5">TypeScript</span>
                        </span>
                        <span class="tech-badge">
                            <i class="fab fa-react text-blue-400"></i>
                            <span class="ml-1.5">React</span>
                        </span>
                        <span class="tech-badge">
                            <i class="fab fa-node-js text-green-600"></i>
                            <span class="ml-1.5">Node.js</span>
                        </span>
                        <span class="tech-badge">
                            <i class="fab fa-python text-blue-500"></i>
                            <span class="ml-1.5">Python</span>
                        </span>
                        <span class="tech-badge">
                            <i class="fab fa-git-alt text-orange-600"></i>
                            <span class="ml-1.5">Git</span>
                        </span>
                    </div>
                </div>
            </div>

            <!-- 右侧内容区域 -->
            <div class="md:col-span-2">
                <!-- 个人简介 -->
                <div class="mb-4 sm:mb-6 md:mb-8">
                    <div class="bg-white/90 backdrop-blur-sm rounded-lg p-4 sm:p-5 md:p-6 shadow-sm hover:shadow-md transition-all duration-300 transform hover:scale-[1.01] group">
                        <h2 class="text-lg sm:text-xl font-semibold mb-3 md:mb-4 flex items-center">
                            <i class="fas fa-user-circle mr-2 text-blue-500"></i>
                            <span class="relative">
                                关于我
                                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-500 group-hover:w-full transition-all duration-300"></span>
                            </span>
                        </h2>
                        <div class="space-y-3">
                            <p class="text-sm sm:text-base text-gray-600 leading-relaxed group-hover:text-gray-700 transition-colors duration-300">
                                你好，我是沐辰，一名热爱编程的全栈开发工程师。专注于Web开发领域，擅长前端架构设计和后端系统开发。
                            </p>
                            <p class="text-sm sm:text-base text-gray-600 leading-relaxed group-hover:text-gray-700 transition-colors duration-300">
                                追求代码质量与用户体验的完美平衡，具有强烈的创新精神和解决问题的能力。
                            </p>
                            <p class="text-sm sm:text-base text-gray-600 leading-relaxed group-hover:text-gray-700 transition-colors duration-300">
                                在工作之余，我热衷于参与开源项目和技术社区分享，期待能与您共同创造价值。
                            </p>
                            <div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-gray-100">
                                <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-xs font-medium hover:bg-blue-100 transition-colors duration-300">开源爱好者</span>
                                <span class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-xs font-medium hover:bg-green-100 transition-colors duration-300">全栈开发</span>
                                <span class="px-3 py-1 bg-purple-50 text-purple-600 rounded-full text-xs font-medium hover:bg-purple-100 transition-colors duration-300">技术分享</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 技能进度条 -->
                <div class="mb-4 sm:mb-6 md:mb-8">
                    <div class="bg-white/90 backdrop-blur-sm rounded-lg p-4 sm:p-5 md:p-6 shadow-sm hover:shadow-md transition-all duration-300 transform hover:scale-[1.01] group">
                        <h2 class="text-lg sm:text-xl font-semibold mb-3 md:mb-4 flex items-center">
                            <i class="fas fa-code mr-2 text-blue-500"></i>
                            <span class="relative">
                                技能专长
                                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-500 group-hover:w-full transition-all duration-300"></span>
                            </span>
                        </h2>
                        <div class="space-y-4 sm:space-y-5">
                            <div class="skill-item group/skill" data-skill="JavaScript">
                                <div class="flex justify-between mb-2">
                                    <div class="flex items-center">
                                        <i class="fab fa-js text-yellow-500 mr-2"></i>
                                        <span class="text-sm sm:text-base font-medium text-gray-700 group-hover/skill:text-blue-600 transition-colors duration-300">JavaScript</span>
                                    </div>
                                    <span class="text-xs sm:text-sm font-medium text-gray-500 group-hover/skill:text-blue-500 transition-colors duration-300">90%</span>
                                </div>
                                <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                                    <div class="progress-bar h-full w-[90%] bg-gradient-to-r from-blue-500 to-blue-600 group-hover/skill:from-blue-600 group-hover/skill:to-blue-700 transition-all duration-500 transform origin-left"></div>
                                </div>
                            </div>

                            <div class="skill-item group/skill" data-skill="Python">
                                <div class="flex justify-between mb-2">
                                    <div class="flex items-center">
                                        <i class="fab fa-python text-blue-500 mr-2"></i>
                                        <span class="text-sm sm:text-base font-medium text-gray-700 group-hover/skill:text-blue-600 transition-colors duration-300">Python</span>
                                    </div>
                                    <span class="text-xs sm:text-sm font-medium text-gray-500 group-hover/skill:text-blue-500 transition-colors duration-300">85%</span>
                                </div>
                                <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                                    <div class="progress-bar h-full w-[85%] bg-gradient-to-r from-blue-500 to-blue-600 group-hover/skill:from-blue-600 group-hover/skill:to-blue-700 transition-all duration-500 transform origin-left"></div>
                                </div>
                            </div>

                            <div class="skill-item group/skill" data-skill="React">
                                <div class="flex justify-between mb-2">
                                    <div class="flex items-center">
                                        <i class="fab fa-react text-cyan-500 mr-2"></i>
                                        <span class="text-sm sm:text-base font-medium text-gray-700 group-hover/skill:text-blue-600 transition-colors duration-300">React</span>
                                    </div>
                                    <span class="text-xs sm:text-sm font-medium text-gray-500 group-hover/skill:text-blue-500 transition-colors duration-300">88%</span>
                                </div>
                                <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                                    <div class="progress-bar h-full w-[88%] bg-gradient-to-r from-blue-500 to-blue-600 group-hover/skill:from-blue-600 group-hover/skill:to-blue-700 transition-all duration-500 transform origin-left"></div>
                                </div>
                            </div>

                            <div class="skill-item group/skill" data-skill="Node.js">
                                <div class="flex justify-between mb-2">
                                    <div class="flex items-center">
                                        <i class="fab fa-node-js text-green-500 mr-2"></i>
                                        <span class="text-sm sm:text-base font-medium text-gray-700 group-hover/skill:text-blue-600 transition-colors duration-300">Node.js</span>
                                    </div>
                                    <span class="text-xs sm:text-sm font-medium text-gray-500 group-hover/skill:text-blue-500 transition-colors duration-300">82%</span>
                                </div>
                                <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                                    <div class="progress-bar h-full w-[82%] bg-gradient-to-r from-blue-500 to-blue-600 group-hover/skill:from-blue-600 group-hover/skill:to-blue-700 transition-all duration-500 transform origin-left"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 项目统计 -->
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4 mb-4 sm:mb-6 md:mb-8">
                    <div class="stat-card bg-white/90 backdrop-blur-sm rounded-lg p-3 sm:p-4 md:p-6 shadow-sm hover:shadow-md transition-all duration-300 transform hover:scale-[1.05] flex flex-col items-center justify-center">
                        <div class="stat-number text-xl sm:text-2xl md:text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600" data-target="50">0+</div>
                        <div class="text-xs sm:text-sm text-gray-600 mt-1 sm:mt-2">Projects</div>
                    </div>
                    <div class="stat-card bg-white/90 backdrop-blur-sm rounded-lg p-3 sm:p-4 md:p-6 shadow-sm hover:shadow-md transition-all duration-300 transform hover:scale-[1.05] flex flex-col items-center justify-center">
                        <div class="stat-number text-xl sm:text-2xl md:text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600" data-target="5">0+</div>
                        <div class="text-xs sm:text-sm text-gray-600 mt-1 sm:mt-2">Years Exp.</div>
                    </div>
                    <div class="stat-card bg-white/90 backdrop-blur-sm rounded-lg p-3 sm:p-4 md:p-6 shadow-sm hover:shadow-md transition-all duration-300 transform hover:scale-[1.05] flex flex-col items-center justify-center">
                        <div class="stat-number text-xl sm:text-2xl md:text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600" data-target="100">0+</div>
                        <div class="text-xs sm:text-sm text-gray-600 mt-1 sm:mt-2">Success</div>
                    </div>
                </div>

                <!-- 旗下网站 -->
                <div class="mb-4 sm:mb-6 md:mb-8">
                    <div class="bg-white/90 backdrop-blur-sm rounded-lg p-4 sm:p-5 md:p-6 shadow-sm hover:shadow-md transition-all duration-300 group">
                        <h2 class="text-lg sm:text-xl font-semibold mb-4 sm:mb-5 md:mb-6 flex items-center">
                            <i class="fas fa-globe mr-2 text-blue-500"></i>
                            <span class="relative">
                                旗下网站
                                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-500 group-hover:w-full transition-all duration-300"></span>
                            </span>
                        </h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5">
                            <a href="https://mcya.cn" target="_blank" rel="noopener" class="group/card">
                                <div class="website-card bg-gradient-to-br from-white to-gray-50 rounded-lg p-4 sm:p-5 hover:from-blue-50 hover:to-blue-100 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-lg border border-gray-100 hover:border-blue-200 h-full">
                                    <div class="flex items-start space-x-4">
                                        <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white shrink-0">
                                            <i class="fas fa-code text-xl"></i>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <h3 class="font-semibold text-gray-900 group-hover/card:text-blue-600 mb-2 flex items-center text-sm sm:text-base truncate">
                                                <span class="truncate">技术博客</span>
                                                <i class="fas fa-arrow-right ml-2 opacity-0 group-hover/card:opacity-100 transform group-hover/card:translate-x-1 transition-all duration-300"></i>
                                            </h3>
                                            <p class="text-xs sm:text-sm text-gray-600 group-hover/card:text-gray-700 line-clamp-2">分享Web开发技术文章和经验总结，包括前端、后端、架构设计等领域的深度探讨。</p>
                                            <div class="flex items-center mt-3 text-xs text-gray-500">
                                                <i class="fas fa-eye mr-1"></i>
                                                <span>1.2k 访问</span>
                                                <i class="fas fa-file-alt mx-2"></i>
                                                <span>50+ 文章</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>

                            <a href="https://example2.com" target="_blank" rel="noopener" class="group/card">
                                <div class="website-card bg-gradient-to-br from-white to-gray-50 rounded-lg p-4 sm:p-5 hover:from-purple-50 hover:to-purple-100 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-lg border border-gray-100 hover:border-purple-200 h-full">
                                    <div class="flex items-start space-x-4">
                                        <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center text-white shrink-0">
                                            <i class="fas fa-project-diagram text-xl"></i>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <h3 class="font-semibold text-gray-900 group-hover/card:text-purple-600 mb-2 flex items-center text-sm sm:text-base truncate">
                                                <span class="truncate">项目展示</span>
                                                <i class="fas fa-arrow-right ml-2 opacity-0 group-hover/card:opacity-100 transform group-hover/card:translate-x-1 transition-all duration-300"></i>
                                            </h3>
                                            <p class="text-xs sm:text-sm text-gray-600 group-hover/card:text-gray-700 line-clamp-2">展示个人开发的优秀项目，包括Web应用、工具库、开源项目等作品集。</p>
                                            <div class="flex items-center mt-3 text-xs text-gray-500">
                                                <i class="fas fa-code-branch mr-1"></i>
                                                <span>20+ 项目</span>
                                                <i class="fas fa-star mx-2"></i>
                                                <span>500+ Star</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>

                            <a href="https://example3.com" target="_blank" rel="noopener" class="group/card">
                                <div class="website-card bg-gradient-to-br from-white to-gray-50 rounded-lg p-4 sm:p-5 hover:from-green-50 hover:to-green-100 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-lg border border-gray-100 hover:border-green-200 h-full">
                                    <div class="flex items-start space-x-4">
                                        <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center text-white shrink-0">
                                            <i class="fas fa-tools text-xl"></i>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <h3 class="font-semibold text-gray-900 group-hover/card:text-green-600 mb-2 flex items-center text-sm sm:text-base truncate">
                                                <span class="truncate">在线工具</span>
                                                <i class="fas fa-arrow-right ml-2 opacity-0 group-hover/card:opacity-100 transform group-hover/card:translate-x-1 transition-all duration-300"></i>
                                            </h3>
                                            <p class="text-xs sm:text-sm text-gray-600 group-hover/card:text-gray-700 line-clamp-2">提供实用的Web开发工具，如代码格式化、图片处理、开发调试等在线服务。</p>
                                            <div class="flex items-center mt-3 text-xs text-gray-500">
                                                <i class="fas fa-tools mr-1"></i>
                                                <span>10+ 工具</span>
                                                <i class="fas fa-users mx-2"></i>
                                                <span>2k+ 用户</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>

                            <a href="https://example4.com" target="_blank" rel="noopener" class="group/card">
                                <div class="website-card bg-gradient-to-br from-white to-gray-50 rounded-lg p-4 sm:p-5 hover:from-orange-50 hover:to-orange-100 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-lg border border-gray-100 hover:border-orange-200 h-full">
                                    <div class="flex items-start space-x-4">
                                        <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center text-white shrink-0">
                                            <i class="fas fa-graduation-cap text-xl"></i>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <h3 class="font-semibold text-gray-900 group-hover/card:text-orange-600 mb-2 flex items-center text-sm sm:text-base truncate">
                                                <span class="truncate">学习资源</span>
                                                <i class="fas fa-arrow-right ml-2 opacity-0 group-hover/card:opacity-100 transform group-hover/card:translate-x-1 transition-all duration-300"></i>
                                            </h3>
                                            <p class="text-xs sm:text-sm text-gray-600 group-hover/card:text-gray-700 line-clamp-2">整理优质的编程学习资源，包括教程、文档、视频等，助力开发者成长。</p>
                                            <div class="flex items-center mt-3 text-xs text-gray-500">
                                                <i class="fas fa-book mr-1"></i>
                                                <span>100+ 资源</span>
                                                <i class="fas fa-download mx-2"></i>
                                                <span>5k+ 下载</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </main>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="back-to-top-btn" aria-label="返回顶部" title="返回顶部">
        <i class="fas fa-chevron-up"></i>
    </button>

    <!-- 自定义脚本 -->
    <script src="./assets/js/cursor.js" defer></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 激活淡入效果
            document.querySelector('.fade-in').classList.add('active');
            
            // 初始化打字效果
            new Typed('#typed-text', {
                strings: [
                    'Full Stack Developer',
                    'UI/UX Designer',
                    'Problem Solver',
                    'Tech Enthusiast'
                ],
                typeSpeed: 50,
                backSpeed: 30,
                backDelay: 2000,
                loop: true
            });

            // 初始化粒子效果
            particlesJS('particles-js', {
                particles: {
                    number: { value: 80, density: { enable: true, value_area: 800 } },
                    color: { value: '#3b82f6' },
                    shape: { type: 'circle' },
                    opacity: { value: 0.5, random: false },
                    size: { value: 3, random: true },
                    line_linked: {
                        enable: true,
                        distance: 150,
                        color: '#3b82f6',
                        opacity: 0.2,
                        width: 1
                    },
                    move: {
                        enable: true,
                        speed: 2,
                        direction: 'none',
                        random: false,
                        straight: false,
                        out_mode: 'out',
                        bounce: false
                    }
                },
                interactivity: {
                    detect_on: 'canvas',
                    events: {
                        onhover: { enable: true, mode: 'grab' },
                        onclick: { enable: true, mode: 'push' },
                        resize: true
                    },
                    modes: {
                        grab: { distance: 140, line_linked: { opacity: 1 } },
                        push: { particles_nb: 4 }
                    }
                },
                retina_detect: true
            });

            // 为技能进度条添加动画
            const skills = [
                { name: 'JavaScript', level: 90 },
                { name: 'Python', level: 85 },
                { name: 'React', level: 88 },
                { name: 'Node.js', level: 82 }
            ];

            const observerCallback = (entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const progressBar = entry.target.querySelector('.progress-bar');
                        const level = entry.target.getAttribute('data-level');
                        progressBar.style.width = `${level}%`;
                        observer.unobserve(entry.target);
                    }
                });
            };

            const observer = new IntersectionObserver(observerCallback, {
                threshold: 0.5
            });

            skills.forEach(skill => {
                const skillItem = document.querySelector(`[data-skill="${skill.name}"]`);
                if (skillItem) {
                    skillItem.setAttribute('data-level', skill.level);
                    observer.observe(skillItem);
                }
            });

            // 数字增长动画
            const statsObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const stat = entry.target;
                        const target = parseInt(stat.getAttribute('data-target'));
                        let current = 0;
                        const increment = target / 50;
                        const timer = setInterval(() => {
                            current += increment;
                            if (current >= target) {
                                stat.textContent = target + '+';
                                clearInterval(timer);
                            } else {
                                stat.textContent = Math.floor(current) + '+';
                            }
                        }, 40);
                        statsObserver.unobserve(stat);
                    }
                });
            }, { threshold: 0.5 });

            document.querySelectorAll('.stat-number').forEach(stat => {
                statsObserver.observe(stat);
            });

            // 项目卡片悬停效果
            const projectCards = document.querySelectorAll('.project-card');
            projectCards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.querySelector('.project-details').classList.add('show');
                });
                card.addEventListener('mouseleave', function() {
                    this.querySelector('.project-details').classList.remove('show');
                });
            });

            // 3D卡片效果
            document.querySelectorAll('.tilt-card').forEach(card => {
                card.addEventListener('mousemove', handleTilt);
                card.addEventListener('mouseleave', resetTilt);
            });

            // 微信二维码悬浮与点击逻辑
            const wechatBtn = document.querySelector('.wechat-btn');
            const wechatQr = wechatBtn.querySelector('.wechat-qr-popup');
            function isMobile() {
                return /Mobi|Android|iPhone|iPad|iPod|Windows Phone/i.test(navigator.userAgent);
            }
            if (isMobile()) {
                wechatBtn.addEventListener('click', function() {
                    window.location.href = './assets/images/wechat-qr.jpg';
                });
            } else {
                wechatBtn.addEventListener('mouseenter', function() {
                    wechatQr.classList.remove('hidden');
                });
                wechatBtn.addEventListener('mouseleave', function() {
                    wechatQr.classList.add('hidden');
                });
            }

            // 返回顶部按钮功能
            const backToTopBtn = document.getElementById('back-to-top');

            // 监听滚动事件
            window.addEventListener('scroll', function() {
                if (window.pageYOffset > 300) {
                    backToTopBtn.classList.add('show');
                } else {
                    backToTopBtn.classList.remove('show');
                }
            });

            // 点击返回顶部
            backToTopBtn.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });

            // 键盘支持
            backToTopBtn.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                }
            });
        });

        function handleTilt(e) {
            const card = e.currentTarget;
            const rect = card.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            const centerX = rect.width / 2;
            const centerY = rect.height / 2;
            
            const rotateX = (y - centerY) / 10;
            const rotateY = (centerX - x) / 10;
            
            card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
        }

        function resetTilt(e) {
            const card = e.currentTarget;
            card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)';
        }
    </script>

    <!-- 页面底部版权信息 -->
    <footer class="text-center py-6 border-t border-gray-200 bg-white/50 backdrop-blur-sm">
        <div class="max-w-4xl mx-auto px-4">
            <p class="text-sm text-gray-600 mb-2">
                © 2025 <a href="https://mcwl.net" class="text-blue-600 hover:text-blue-800 transition-colors duration-300">沐辰 (MC)</a>. All rights reserved.
            </p>
            <p class="text-xs text-gray-500 mb-2">
                基于 <a href="https://github.com/mcwlgzs/mc-homepage" target="_blank" rel="noopener" class="text-blue-500 hover:text-blue-700 transition-colors duration-300">沐辰个人主页</a> 项目构建 |
                采用 <a href="https://github.com/mcwlgzs/mc-homepage/blob/main/LICENSE" target="_blank" rel="noopener" class="text-blue-500 hover:text-blue-700 transition-colors duration-300">MIT 许可证</a> 开源
            </p>
            <!-- ICP备案信息 -->
            <div class="icp-info text-xs text-gray-500">
                <a href="http://beian.miit.gov.cn" target="_blank" rel="noopener" class="inline-flex items-center hover:text-blue-600 transition-colors duration-300">
                    <img src="./assets/images/icp-icon.svg" alt="ICP备案图标" class="w-4 h-4 mr-1">
                    京ICP备2025060520号
                </a>
                <span class="mx-1">|</span>
                <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=52010302008888" target="_blank" rel="noopener" class="inline-flex items-center hover:text-blue-600 transition-colors duration-300">
                    <img src="./assets/images/police-icon.svg" alt="公安备案图标" class="w-4 h-4 mr-1">
                    京公网安备52010302008888号
                </a>
            </div>
        </div>
    </footer>
</body>
</html>